<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 性别分布 -->
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span>用户性别分布</span>
          </template>
          <gender-chart ref="genderChart" />
        </el-card>
      </el-col>

      <!-- 年龄分布 -->
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span>用户年龄分布</span>
          </template>
          <age-chart ref="ageChart" />
        </el-card>
      </el-col>

      <!-- 新增：宠物类型分布 -->
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span>宠物类型分布</span>
          </template>
          <pet-type-chart ref="petTypeChart" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 注册趋势 -->
    <el-row class="mt-20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <span>用户注册趋势</span>
            <div class="float-right">
              <el-radio-group v-model="trendType" @change="handleTrendChange">
                <el-radio-button label="day">按日</el-radio-button>
                <el-radio-button label="month">按月</el-radio-button>
                <el-radio-button label="year">按年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <reg-trend ref="regTrend" :type="trendType" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AgeChart from './components/AgeChart'
import GenderChart from './components/GenderChart'
import RegTrend from './components/RegTrend'
import PetTypeChart from './components/PetTypeChart' // 导入新增组件

export default {
  name: 'UserAnalysis',
  components: { AgeChart, GenderChart, RegTrend, PetTypeChart }, // 添加组件
  data() {
    return {
      trendType: 'month'
    }
  },
  methods: {
    handleTrendChange() {
      this.$refs.regTrend.refreshData()
    }
  }
}
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}
.float-right {
  float: right;
}
</style>
